<template>
    <div id="PolicyList">
        <search-bar @search="searchForm=$event"/>
        <vj-list :load-more="loadMore.bind(this)">
            <template #default="{item}">
                <section @click="gotoPolicy(item)" class="c-policy">
                    <van-image fit="cover" class="c-policy__img" :src="item.picture"/>
                    <div class="c-policy__wrap">
                        <h3 class="c-policy__title">{{item.title}}</h3>
                        <em>{{item.createTime}}</em>
                    </div>
                </section>
            </template>
        </vj-list>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import VjList from "@/components/vj-list.vue";
    import {asyncSleep} from "vijay-util";
    import {freeze} from "@/utils/logic";
    import SearchBar from "@/components/search-bar.vue";
    import {requestByGet} from "@/utils/request";

    let i = 5;
    @Component({
        components: {SearchBar, VjList}
    })
    export default class PolicyList extends Vue implements ComponentOptions<Vue> {
        name = "PolicyList";
        searchForm = {}
        async loadMore(pageNo, pageSize) {
            const {records} = await requestByGet(`/qqc/qqcPolicy/list`, {pageNo, pageSize,...this.searchForm});
            return records;
        }
        gotoPolicy({id,formality,policyurl}){
          return +formality===1?this.navigateTo(policyurl):this.$pushRoute({path: '/policy', query: {customId: id}})
        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #PolicyList {
        padding-top: 55px;
        .c-search {
            z-index: 999999;
            @include absoluteFull(fixed);
            bottom: auto;
            box-shadow: 0 2px 3px #f4f4f4;
            &__btn {
                font-size: 14px;
                vertical-align: middle;
                padding: 0 16px 0 12px;
            }
            &__icon {
                vertical-align: middle;
                margin-left: 8px;
                margin-top: -2px;
            }
        }
        .c-pop {
            padding: 55px 0 6px;
            .active {
                color: #349e7e;
                font-weight: bold;
            }
        }
        .c-policy {
            @include alignCenter;
            &__img {
                width: 100px;
                height: 70px;
                flex-shrink: 0;
            }
            &__wrap {
                margin: 12px;
                line-height: 1.4;
                font-size: 12px;
            }
            &__title {
                font-size: 16px;
                margin-bottom: 6px;
                @include t-overflow(2);
            }
        }
    }
</style>
